<template>
  <el-container class="HomeContainer">
    <el-header id="header">
      <div class="navleft">
        <!-- <img style="width: 60px; height: 50px;" src='../assets/logo.png' /> -->
        吉他乐理文档
      </div>
      <div class="navRight">
        <el-menu :default-active="HeaderActivePath" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
<!--           <el-menu-item index="/Home" @click="saveHeaderNavState('/Home')">首页</el-menu-item> -->
          <el-menu-item index="/Community" @click="saveHeaderNavState('/Community')">讨论区</el-menu-item>
          <el-menu-item index="/Files" @click="saveHeaderNavState('/Files')">文档区</el-menu-item>
          <el-submenu index="4" v-if="usershow()">
            <template slot="title">
              <img :src="userdata.Avatar" alt="" class="post_author_avatar">
              我的信息
            </template>
            <el-menu-item index="/User" @click="saveHeaderNavState('/User')"><i class="el-icon-house"></i>个人主页</el-menu-item>
            <el-menu-item @click="config()"><i class="el-icon-edit-outline"></i>设置</el-menu-item>
            <el-menu-item @click="loginout()"><i class="el-icon-s-fold"></i>退出</el-menu-item>
          </el-submenu>
          <el-menu-item v-if="!usershow()" index="/Login"><i class="el-icon-user-solid"></i>登陆/注册</el-menu-item>
          <el-submenu index="message">
            <template slot="title">
              <i class="el-icon-bell"></i>
              消息中心
            </template>
            <el-menu-item>通知</el-menu-item>
            <el-menu-item>回复我的</el-menu-item>
            <el-menu-item>私信</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-header>
    <router-view></router-view>
  </el-container>
</template>
<script>
export default {
  inject: ['reload'],
  name: 'Home',
  data() {
    return {
      HeaderActivePath: '',
      isCollapse: false,
      userdata: {}
    }
  },
  created() {
    this.HeaderActivePath = window.localStorage.getItem('HeaderActivePath')
    if (this.HeaderActivePath === null) {
      this.HeaderActivePath = '/Home'
    }
    const token = window.localStorage.getItem('token')
    if (token) {
      this.getUserMessage()
    }
  },
  methods: {
    config() {
      const h = this.$createElement
      this.$notify({
        title: '设置功能模块',
        message: h('i', { style: 'color: teal' }, '还没完善功能,见谅！')
      })
    },
    async getUserMessage() {
      const ret = await this.$http.get('/user/getUserMessage')
      if (ret.data.err_code !== 0) {
        console.log('获取信息失败')
      }
      console.log(ret.data)
      this.userdata = ret.data.data
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    clickCollapse() {
      this.isCollapse = !this.isCollapse
    },
    saveHeaderNavState(HeaderActivePath) {
      window.localStorage.setItem('HeaderActivePath', HeaderActivePath)
    },
    usershow() {
      const token = window.localStorage.getItem('token')
      if (token === null) {
        return false
      } else if (token !== null) {
        return true
      }
    },
    loginout() {
      window.localStorage.clear('token')
      this.usershow()
      this.reload()
    }
  },
  computed: {
    showBackTop: function() {
      const value = this.scrollTop
      console.log(value)
      return value
    }
  }
}

</script>
<style scoped>
.post_author_avatar {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  vertical-align: middle;
}

.el-backtop {
  position: fixed;
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .12);
  cursor: pointer;
  z-index: 5;
}
@keyframes filling {
    from {
        background-position: center 25%;
    }
    to {
        background-position: center 50%;
    }
}
.navleft {
    background-image: url(http://localhost:3000/public/img/lufei.png);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 30px;
    font-family: 'Bungee', cursive;
    line-height: 60px;
    margin-left: 30px;
    animation: filling 3s ease forwards;
}
.navleft {
  height: 100%;
}

.navleft img {
  vertical-align: middle;
  margin-right: 6px;
  width: 40px;
  height: 40px;
}

.HomeContainer {
  height: 100%;
  color: white;
}

.el-submenu__title {
  font-size: 14px;
  color: #303133;
  padding: 0 70px;
  cursor: pointer;
  -webkit-transition: border-color .3s, background-color .3s, color .3s;
  transition: border-color .3s, background-color .3s, color .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.isCollapseStyle {
  background-color: #4A5064;
  line-height: 28px;
  color: white;
  text-align: center;
  cursor: pointer;
}

.el-header {
  /*background-color: #B3C0D1;*/
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22px;
  font-family: "微软雅黑";
  color: #fff;
  padding-left: 15px;
}

.el-menu.el-menu--horizontal {
  border-bottom: solid 0 #e6e6e6;
}

.el-aside {
  /*background-color: #D3DCE6;*/
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-aside .el-menu {
  border-right: none;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 50px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
